<template>
    <div class="main">        

        <!-- 主体内容 -->
        <div class="center_context" style="height: calc(100vh - 70px)">

            <!--兴城地图-->
            <div class="map-display" id="mapDiv">
            </div>

            <!--坐标与比例尺-->
            <div class="coordinateAndScaleBar">
                <!--比例尺-->
                <div id="scaleBarDiv" class="map-scalebar" v-show="scaleShow">
                    <div id="scaleBar"></div>
                </div>
                <!--坐标-->
                <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow"></div>
            </div>

            <!-- 地图左上角按钮栏 -->
            <div id="myToolBtns" class="mytool-btns">
                <!-- 按钮组 -->
                <div id="buttonDiv" style="float: left;">
                    <div class="navbtn-items" v-if=layerShow @click="togglePanel('lyrPanelVisible','layerFlag')" title="图层" id="layerBtn">
                        <img src="../assets/images/map_icons/layer.png">
                        <img v-show="layerFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <div class="navbtn-items" v-if=measureShow @click="togglePanel('measurePanelVisible','measureFlag')" title="地图量测" id="measureBtn">
                        <img src="../assets/images/map_icons/measure.png">
                        <img v-show="measureFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <div class="navbtn-items" v-if=tool2Show @click="togglePanel('tool2PanelVisible','tool2Flag')" title="工具2" id="layerBtn2">
                        <img src="../assets/images/map_icons/layer.png">
                        <img v-show="tool2Flag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <div class="navbtn-items" v-if=decorateShow @click="togglePanel('decoratePanelVisible','decorateFlag')" title="地图整饰控制" id="decorateBtn">
                        <img src="../assets/images/map_icons/Decorate.png">
                        <img v-show="decorateFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <div class="navbtn-items" v-if=attrQueryPanelShow @click="togglePanel('attrQueryPanelVisible','attrQueryFlag')" title="属性查询" id="attrQueryBtn">
                        <img src="../assets/images/map_icons/shuxing.png">
                        <img v-show="attrQueryFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <div class="navbtn-items" v-if=geometryQueryPanelShow @click="togglePanel('geometryQueryPanelVisible','geometryQueryFlag')" title="几何查询" id="geometryQueryBtn">
                        <img src="../assets/images/map_icons/kongjian.png">
                        <img v-show="geometryQueryFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <div class="navbtn-items" v-if=bufferAnalystPanelShow @click="togglePanel('bufferAnalystPanelVisible','bufferAnalystFlag')" title="缓冲区分析" id="bufferAnalystBtn">
                        <img src="../assets/images/map_icons/huanchongqu.png">
                        <img v-show="bufferAnalystFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <div class="navbtn-items" v-if=heatMapAnalystPanelShow @click="togglePanel('heatMapAnalystPanelVisible','heatMapAnalystFlag')" title="热力图" id="heatMapAnalystBtn">
                        <img src="../assets/images/map_icons/relitu.png">
                        <img v-show="heatMapAnalystFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>
                    <div class="navbtn-items" v-if=clusterLayerPanelShow @click="togglePanel('clusterLayerPanelVisible','clusterLayerFlag')" title="聚类" id="clusterLayertBtn">
                        <img src="../assets/images/map_icons/cluster.png">
                        <img v-show="clusterLayerFlag" src="../assets/images/map_icons/selectPoint.png" class="item-selected">
                    </div>

                </div>  <!-- buttonDiv结束 -->
            </div> <!-- myToolBtns结束 -->

            <!--“整饰”下拉-->
            <div class="tool-item-panel mapDecorateTools" id="mapDecorateTools" :class="{'layer-hide':decoratePanelVisible}" data-toolPanel-title="Decorate">
                <div class="map-tool-item"  id="CoordinateDisplay" title="坐标" @click="coordinateShow=!coordinateShow">
                    <img src="../assets/images/map_icons/Coordinate.png">
                    <span>坐标</span>
                </div>
                <div class="map-tool-item"  id="ScaleDisplay" title="比例尺" @click="scaleShow=!scaleShow">
                    <img src="../assets/images/map_icons/Scale.png">
                    <span>比例尺</span>
                </div>
            </div>

            <!--“量测”下拉-->
            <div class="mapMeasurementTools" :class="{'layer-hide':measurePanelVisible}">    <!--tool-item-panel v-if="measurePanelVisible"-->
                <div class="map-tool-item" title="测面积" id="myMeasureArea">  <!--@click="myMeasureArea" @click="triggerBus('area')"-->
                    <img src="../assets/images/map_icons/Area.png" />
                    <span>面积</span>
                </div>
                <div class="map-tool-item" title="测距离" id="myMeasureDistance">    <!-- @click="myMeasureDistance" @click="triggerBus('distance')"-->
                    <img src="../assets/images/map_icons/Distance.png" />
                    <span>距离</span>
                </div>
                <div class="map-tool-item" title="清除量测结果" id="myClearMeasure">  <!--@click="myClearMeasure" @click="triggerBus('clean')"-->
                    <img src="../assets/images/map_icons/清空.svg" />
                    <span>清除</span>
                </div>
            </div>

            <!--图层控制面板-->
            <div id="layerControl" class="layerControl" :class="{'layer-hide':lyrPanelVisible}">
                <div class="title"><label>图层列表</label></div>
                <ul id="layerTree" class="layerTree"></ul>
            </div>

            <!-- 气泡（信息窗口） -->
            <div id="popup" class="ol-popup">
                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                <div id="popup-content"></div>
            </div>

            <!--进度条-->
            <div id="preview">
                <img src="../assets/images/waiting.gif" alt='' /><br />
                <br />
                <span>正在查询/分析，请稍候……</span>
            </div>

            <!--属性查询-->
            <div :class="{'layer-hide':attrQueryPanelVisible}" id="sxcx" style="background-color: rgba(255,255,255,0.5);">
                <!-- <el-select
                        v-model="value1"
                        multiple
                        style="margin-left: 45px;"
                        placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-select
                        v-model="value2"
                        collapse-tags
                        style="margin-left: 20px;"
                        placeholder="请选择">
                    <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select> -->

                <!--<el-tag type="info">条件 :</el-tag>-->
                <el-input v-model="attQueryConditions" style="margin-left:20px;width:200px;"  placeholder="请输入查询条件" clearable />
                <!--class="conditionControl"-->
                <!--<label class="labelClass">条件 :</label>-->
                <!--<input type="text" id="Conditions" name="type" class="btnInputClass" value="name='中国'"/>-->

                <el-button
                        style="position:absolute;margin-left: 1em;"
                        type="primary"
                        icon="el-icon-search"
                        @click="AttQuery"
                >
                    查询
                </el-button>
                <el-button
                        style="position:absolute;margin-left: 10em;margin-top: 5px;"
                        size="small"
                        type="info"
                        icon="el-icon-delete"
                        @click="removeSXCXResultLayer"
                >
                    清除
                </el-button>
            </div>

            <!--几何空间查询-->
            <div :class="{'layer-hide':geometryQueryPanelVisible}" id="jhcx" style="margin-left: 45px; margin-top:20px;">
                <el-button
                        style="position:absolute;margin-left: 1em;"
                        type="success"
                        round
                        icon="el-icon-search"
                        @click="geometryQuery"
                >
                    几何查询
                </el-button>
                <el-button
                        style="position:absolute;margin-left: 13em;"
                        type="warning"
                        plain
                        size="small"
                        @click="myClearGeometryQuery"
                >
                    清除 / 取消
                </el-button>
            </div>

            <!--缓冲区分析面板-->
            <div :class="{'layer-hide':bufferAnalystPanelVisible}" id="hcqfx" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
                <h3>缓冲区分析面板</h3>
                <!--缓冲半径：<input type="text" v-model="buffer_radius" />  &lt;!&ndash;:value="buffer_radius"&ndash;&gt;-->
                <label style="width: 54px;line-height: 17px">（单圈）缓冲半径:</label>
                <br />
                <input id="bufferRadius" type="range" min="0.01" max="1" step="0.01" v-model="buffer_radius" />
                {{ this.buffer_radius}} 度
                <br />  <br />
                <label style="width: 54px;line-height: 17px">（多圈）缓冲半径:</label>
                <br />
                <input id="bufferRadiusForMul" type="text" v-model="radiusStr" /> &nbsp; 度
                <br /> <br />
                <input type="button" id="bufferOneRing" value="开始分析（单圈）"/>
                &nbsp;&nbsp;&nbsp;
                <input type="button" id="bufferMulRings" value="开始分析（多圈）"/>
                <br/>
                <br/>
                <input type="button" id="cleanBuffer" value="清除"/>
            </div>

            <!--热力图分析面板-->
            <div :class="{'layer-hide':heatMapAnalystPanelVisible}" id="rlt" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
                <h3>热力图分析面板</h3>
                <label style="width: 54px;line-height: 17px">热力半径:</label><input id="radius" type="range" min="0.01" max="200" step="0.01" v-model="heatmap_radius" value="500" />   <!--value="10"-->
                {{ this.heatmap_radius}} 度
                <!--热点半径：<input type="text" v-model="heatmap_radius" /> &lt;!&ndash;:value="heatmap_radius"&ndash;&gt;-->
                <br/>
                <label style="width: 54px;line-height: 17px">模糊半径:</label><input id="blur" type="range" min="0.02" max="200" step="0.01" v-model="heatmap_blur" />   <!--value="10"-->
                {{ this.heatmap_blur}} 度
                <!--模糊尺寸：<input type="text" v-model="heatmap_blur" />  &lt;!&ndash;:value="heatmap_blur"&ndash;&gt;-->
                <br/> <br/>
                <input type="button" id="heatMapAnalyst" value="开始分析"/>
                &nbsp;&nbsp;&nbsp;
                <input type="button" id="heatMapClear" value="清除"/>
                <br/>
            </div>

            <!--聚类图显示-->
            <div :class="{'layer-hide':clusterLayerPanelVisible}" id="jlt" style="margin-left: 45px; margin-top:60px;">
                <el-button
                        style="position:absolute;margin-left: 1em;background-color: #1c84c6;"
                        type="success"
                        round
                        icon="el-icon-search"
                        id="clusterLayerShow"
                >
                    显示聚类图
                </el-button>
                <el-button
                        style="position:absolute;margin-left: 13em;"
                        type="warning"
                        plain
                        size="small"
                        id="myClearClusterLayer"
                >
                    清除
                </el-button>
            </div>


        </div> <!-- 中部内容结束 -->
    </div> <!-- 最外层Div结束 -->
</template>

<script>
import 'ol/ol.css';
import {Map, View, Overlay, Feature} from 'ol';
import {defaults, Attribution, Zoom, ZoomSlider, ZoomToExtent, OverviewMap, ScaleLine, MousePosition} from 'ol/control';
import { createStringXY } from 'ol/coordinate';
import {XYZ, Vector, Cluster} from 'ol/source';
import { Tile, Vector as lVector, Heatmap as lHeatMap  } from 'ol/layer';
import { Style, Fill, Stroke, Circle, Text, Circle as CircleStyle, Icon, RegularShape } from 'ol/style';
import {Point,LineString,Polygon} from 'ol/geom';
import {Draw,Select} from 'ol/interaction';
import { getArea, getLength } from 'ol/sphere';
import { unByKey } from 'ol/Observable';


export default {
    name:'Ywsx',
    components: {      
    },
    props: {      
    },
    data () {
        return {
            myMapProjection:'EPSG:4326',
            myZoomExtent:[120.17, 40.25, 120.91, 40.97], //地图初始化的缩放范围（复位功能用）
            /**功能组按钮控制**/
            decorateShow:true,//鹰眼-功能启动图标按钮，默认false不显示
            measureShow:true,//测量工具-功能启动图标按钮，默认false不显示
            layerShow: true, //图层按钮的控制-功能启动图标按钮，默认false不显示
            tool2Show: false, //“工具2”按钮的控制-功能启动图标按钮，默认false不显示
            attrQueryPanelShow:true,//属性查询-功能启动图标按钮，默认false不显示
            geometryQueryPanelShow:true,//几何空间查询-功能启动图标按钮，默认false不显示
            bufferAnalystPanelShow:true,//缓冲区分析-功能启动图标按钮，默认false不显示
            heatMapAnalystPanelShow:true,//热力图分析-功能启动图标按钮，默认false不显示
            clusterLayerPanelShow:true,//聚类图-功能启动图标按钮，默认false不显示

            /**地图各悬浮面板的可视状态**/
            coordinateShow: true, //2D坐标,默认false不显示
            scaleShow: true, //显示比例尺,默认false不显示
            decoratePanelVisible:true, //默认true为隐藏
            measurePanelVisible:true, //默认true为隐藏
            lyrPanelVisible:true,  //默认true为隐藏
            tool2PanelVisible:false, //默认true为隐藏
            attrQueryPanelVisible:true, //默认true为隐藏
            geometryQueryPanelVisible:true, //默认true为隐藏
            bufferAnalystPanelVisible:true, //默认true为隐藏
            heatMapAnalystPanelVisible:true, //默认true为隐藏
            clusterLayerPanelVisible:true, //默认true为隐藏

            /*选中显示红色小标志*/
            decorateFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
            measureFlag:false, //测量选中显示红色小标志，默认false为隐藏
            layerFlag: false, //图层选中显示红色小标志，默认false为隐藏
            tool2Flag: false, //“工具2”选中显示红色小标志，默认false为隐藏
            attrQueryFlag:false, //属性查询-选中显示红色小标志，默认false为隐藏
            geometryQueryFlag:false, //几何空间查询-选中显示红色小标志，默认false为隐藏
            bufferAnalystFlag:false, //缓冲区分析-选中显示红色小标志，默认false为隐藏
            heatMapAnalystFlag:false, //热力图分析-选中显示红色小标志，默认false为隐藏
            clusterLayerFlag:false, //聚类图-选中显示红色小标志，默认false为隐藏

            location_green:''
            ,location_blue:"",

            //属性查询数据
            options: [
                {
                    value: '清水',
                    label: '清水'
                },
                {
                    value: '龙回头',
                    label: '龙回头'
                },
                {
                    value: '葫芦岛',
                    label: '葫芦岛'
                },
                {
                    value: '龟山岛',
                    label: '龟山岛'
                },
                {
                    value: '闻家',
                    label: '闻家'
                },
                {
                    value: '芹菜沟',
                    label: '芹菜沟'
                },
                {
                    value: '碱厂',
                    label: '碱厂'
                },
                {
                    value: '老滩',
                    label: '老滩'
                },
                {
                    value: '辛庄',
                    label: '辛庄'
                },
                {
                    value: '台里',
                    label: '台里'
                },
                {
                    value: '吉林大学实践教学基地',
                    label: '吉林大学实践教学基地'
                },
                {
                    value: '夹山',
                    label: '夹山'
                },
            ],
            options2:[
                {
                    value: 'P',
                    label: 'P'
                }, {
                    value: 'W',
                    label: 'W'
                }, {
                    value: 'R',
                    label: 'R'
                }, {
                    value: 'S',
                    label: 'S'
                }
            ],
            value1: [],
            value2: [],
            attQueryConditions:"",
            sxcxArr: {
                mIP:'jlu3s.com'
                ,mPort:'35017'
                ,layerName: "XC-ShiXiLuXian"
                ,lyrIndex: 4 //从0开始
                ,layerTitle:'实习区域实习点'
            },


           //几何空间查询
            geometryQueryConditions: {
                mIP:'jlu3s.com'
                ,mPort:'35017'
                ,layerName: "XC-ShiXiLuXian"   //IGServer上发布的实际名称
                ,lyrIndex: 4  //从0开始
                ,layerTitle:'实习区域的实习点'
            },

            //缓冲区分析
            //buffer_radius:20000, //（单圈）缓冲半径，默认20000米
            buffer_radius: 0.25, //（单圈）缓冲半径，默认20000米
            //radiusStr:'1000,5000,12000,20000', //（多圈）缓冲半径
            radiusStr:'0.01,0.05,0.1', //（多圈）缓冲半径
            //radiusStr:'0.5,11.05,36.1', //（多圈）缓冲半径
            bufferAnalysisConditions: {
                //bufferResultBaseUrl:'gdbp://MapGisLocal/TempAnalysisRusult/sfcls/' //缓存结果图层的基地址
                bufferResultBaseUrl:'gdbp://MapGISLocalPlus/2023开发大赛/sfcls/' //缓存结果图层的基地址
                ,mIP:'jlu3s.com'
                ,mPort:'35017'
                ,leftRad:10000 //（单圈）缓冲时要素左侧缓冲半径,本项目中单位为m
                ,rightRad:10000 //（单圈）缓冲时要素左侧缓冲半径,本项目中单位为m
                ,radiusStr:'1000,5000,7000,10000' //（多圈）缓冲分析各圈的缓冲半径（可设3层或4层），本项目针对投影米坐标
                ,srcInfo:'gdbp://MapGISLocalPlus/2023开发大赛/sfcls/玄奘西行途径城市' //要进行分析的工作图层
                ,singleResultPrefix:'KJ_single_buffer_'  //（单圈）缓冲区结果图层的前缀
                ,mulResultPrefix:'KJ_mul_buffer_'  //（多圈）缓冲区结果图层的前缀
                ,mExtent:[-247.826086956522,22.508749,108.939491,69.5652173913044]  //工作区范围，一般为工作图层的坐标范围
                //,mExtent:[0, 22.508749, 108.939491, 69.5652173913044]  //工作区范围，一般为工作图层的坐标范围
            },

            //热力图
            heatmap_radius: 45, //热力图-热点半径；默认45
            heatmap_blur: 70, //热力图-模糊尺寸；默认70

        }
    },
    methods:{
        //切换面板功能函数
        togglePanel(attr,attr2){
            this[attr] = !this[attr];
            this[attr2] = !this[attr2];
        },

        //地图初始化方法
        InitMap(){
            let that = this;
            //定义地图文档图层和地图
            let mapDocLayer, map

            //初始化地图容器
            map = new Map({
                    target: 'mapDiv',
                    view: new View({
                        //center: [109.43, 33.48],
                        center: [120.75, 40.61],
                        zoom: 10,
                        projection: 'EPSG:4326',
                    }),
                })

            this.map = map;//把地图传出去，以便外面调用

            //初始化地图文档图层对象
            mapDocLayer = new Zondy.Map.MapDocTileLayer('', 'Ceshi1', {
                ip: `jlu3s.com`,
                port: `35017`,
                title: "Ceshi1", //官方Zondy.Map.GdbpLayer里是没有这个属性的
            })
            //将地图文档图层加载到地图中
            map.addLayer(mapDocLayer)

            var myVecLayer1 = new Zondy.Map.GdbpLayer("", ["gdbp://MapGISLocalPlus/2023开发大赛/sfcls/玄奘西行途径城市"], {  //例如：'gdbp://MapGisLocal/sample/ds/地图综合/sfcls/水系'
                ip: "jlu3s.com",
                port: "35017",
                //projection: "EPSG:3857",//默认是4326的
                //extent:[70,22.508749,108.939491,69.5652173913044], //LBW旅游景点 //extent这个很关键,否则出不来
                title: "玄奘西行途径城市-矢量图层", //官方Zondy.Map.GdbpLayer里是没有这个属性的
                visible: true, //官方Zondy.Map.GdbpLayer里是没有这个属性的
                // style: new Zondy.Object.CDisplayStyle({
                //     AnnSizeFixed:true,//注记符号大小固定
                //     PntSizeFixed:true,//点状符号大小固定
                //     ShowCoordPnt:true,//显示坐标点
                //     //ShowElemRect:true,//显示元素的外包矩形
                // })
            });
            map.addLayer(myVecLayer1)

            var myVecLayer4 = new Zondy.Map.GdbpLayer("", ["gdbp://MapGISLocalPlus/2023开发大赛/sfcls/XCLine"], {  //例如：'gdbp://MapGisLocal/sample/ds/地图综合/sfcls/水系'
                ip: "jlu3s.com",
                port: "35017",
                //projection: "EPSG:3857",//默认是4326的
                //extent:[70,22.508749,108.939491,69.5652173913044], //LBW旅游景点 //extent这个很关键,否则出不来
                title: "XCLine-Vector", //官方Zondy.Map.GdbpLayer里是没有这个属性的
                visible: true, //官方Zondy.Map.GdbpLayer里是没有这个属性的
            });
            map.addLayer(myVecLayer4)

            //region地图控件
            /*集中调用*/
            addZoomControl();
            addZoomExtentControl();
            addMousePositionControl();
            addScaleControl();

            //缩放控件
            function addZoomControl() {
                if (map != null) {
                    var zoom = new Zoom()
                    map.addControl(zoom)
                }
            }
            //复位
            function addZoomExtentControl() {
                if (map != null) {
                    var zoomToExtent = new ZoomToExtent({
                        extent:that.myZoomExtent,
                    })
                    map.addControl(zoomToExtent)
                }
            }

            //添加坐标
            function addMousePositionControl() {
                if (map != null) {
                    var mousePositionControl = new MousePosition({
                        //坐标格式
                        coordinateFormat: createStringXY(5),//坐标小数位数
                        //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
                        projection: 'EPSG:4326',
                        //坐标信息显示样式类名，默认是'ol-mouse-position'
                        className: 'custom-mouse-position',
                        //显示鼠标位置信息的目标容器
                        target: document.getElementById('mouse-position'),
                        //未定义坐标的标记
                        undefinedHTML: '&nbsp;',
                    })
                    map.addControl(mousePositionControl)
                }
            }

            //比例尺控件
            function addScaleControl() {
                if (map != null) {
                    //实例化比例尺控件（ScaleLine）
                    var scaleLineControl = new ScaleLine({
                        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
                        units: 'metric',
                        target: 'scaleBar',
                        className: 'ol-scale-line'
                    })
                    map.addControl(scaleLineControl)
                }
            }
            //endregion

            /*#region图层管理面板*/
            //加载图层列表数据
            loadLayersControl(map, "layerTree");

            //map中的图层数组
            //let layerArr = new Array();
            //图层名称数组
            //let layerNameArr = new Array();
            //图层可见属性数组
            //let layerVisibilityArr = new Array();

            /**
             * 加载图层列表数据
             * @param {ol.Map} map 地图对象
             * @param {string} id 图层列表容器ID
             */
            function loadLayersControl(map, id) {
                //图层目录容器
                var treeContent = document.getElementById(id);
                //获取地图中所有图层
                var layers = map.getLayers();
                //console.log(layers,888)
                for (var i = 0; i < layers.getLength() ; i++) {
                    let t = layers.array_[i].get('title');
                    let tv = layers.array_[i].getVisible();

                    //新增li元素，用来承载图层项
                    var elementLi = document.createElement('li');
                    // 添加子节点
                    treeContent.appendChild(elementLi);
                    //创建复选框元素
                    var elementInput = document.createElement('input');
                    elementInput.type = "checkbox";
                    elementInput.name = "layers";
                    elementLi.appendChild(elementInput);
                    //创建label元素
                    var elementLable = document.createElement('label');
                    elementLable.className = "layer";
                    //设置图层名称
                    setInnerText(elementLable, t);
                    elementLi.appendChild(elementLable);
                    //设置图层默认显示状态
                    if (tv) {
                        elementInput.checked = true;
                    }
                    //为checkbox添加变更事件
                    addChangeEvent(elementInput, layers.array_[i]);
                }
            }
            /**
             * 为checkbox元素绑定变更事件
             * @param {input} element checkbox元素
             * @param {ol.layer.Layer} layer 图层对象
             */
            function addChangeEvent(element, layer) {
                element.onclick = function () {
                    if (element.checked) {
                        //显示图层
                        layer.setVisible(true);
                    }
                    else {
                        //不显示图层
                        layer.setVisible(false);
                    }
                };
            }
            /**
             * 动态设置元素文本内容（兼容）
             */
            function setInnerText(element, text) {
                if (typeof element.textContent == "string") {
                    element.textContent = text;
                } else {
                    element.innerText = text;
                }
            }
            /*#endregion图层管理面板*/

            //region 地图测量功能

            //定义“测量”和“勾绘”过程中用到的临时工作矢量层
            that.drawSource = new Vector() //图层数据源
            that.drawVector = new lVector({
                title: '临时工作图层（绘制图形用）', //在图层面板中显示
                source: that.drawSource,
                //displayInLayerSwitcher:false,//设为false可以让此图层不显示在图层管理面板中
                style: new Style({
                    //图层样式
                    fill: new Fill({
                        color: 'rgba(255, 255, 255, 0.2)' //填充颜色
                    }),
                    stroke: new Stroke({
                        color: '#ffcc33', //边框颜色
                        width: 2 // 边框宽度
                    }),
                    image: new Circle({
                        radius: 7,
                        fill: new Fill({
                            color: '#ffcc33'
                        })
                    })
                })
            })

            //measure();
            //function measure() {
            //let that = this;
            //region 测量功能
            //OpenLayer5中已封装好与椭球相关的getLength和getArea方法
            //let wgs84Sphere = new ol.Sphere(6378137); //定义一个球对象
            let sketch//当前绘制的要素
            let helpTooltipElement//帮助提示框对象
            let helpTooltip//帮助提示框显示的信息
            let measureTooltipElement//测量工具提示框对象
            let measureTooltip//测量工具中显示的测量值
            let continuePolygonMsg = '继续点击绘制多边形'//当用户正在绘制多边形时的提示信息文本
            let continueLineMsg = '继续点击绘制线'//当用户正在绘制线时的提示信息文本
            let pointerMoveHandler = function (evt) {//鼠标移动事件处理函数
                if (evt.dragging) {
                    return
                }
                /** @type {string} */
                let helpMsg = '点击开始绘制' //当前默认提示信息
                //判断绘制几何类型设置相应的帮助提示信息
                if (sketch) {
                    let geom = sketch.getGeometry()
                    if (geom instanceof Polygon) helpMsg = continuePolygonMsg //绘制多边形时提示相应内容
                    else if (geom instanceof LineString) helpMsg = continueLineMsg //绘制线时提示相应内容
                }
                helpTooltipElement.innerHTML = helpMsg //将提示信息设置到对话框中显示
                helpTooltip.setPosition(evt.coordinate) //设置帮助提示框的位置
            }
            //鼠标移动与动态帮助提示
            function mapPointMove() {
                map.on('pointermove', pointerMoveHandler) //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
            }

            let typeSelect = 'area' //全局变量，默认值为‘area’测面
            let distanceDiv = document.getElementById('myMeasureDistance') //测量类型对象-距离
            let areaDiv = document.getElementById('myMeasureArea') //测量类型对象-面积
            let draw //全局变量，以便后续移除

            //点击测距离
            //bus.$on('myMeasureDistance', function () {
            document.getElementById("myMeasureDistance").addEventListener("click", function(){
                    console.log("（距离）量测");
                    that.map.removeLayer(that.drawVector) //先移除再添加，否则控制台报错
                    that.map.addLayer(that.drawVector)
                    that.map.removeInteraction(draw) //移除绘制图形
                    typeSelect = 'distance'
                    addInteraction() //添加绘图进行测量
                    mapPointMove() //鼠标移动与动态帮助提示
                }.bind(this)
            ) //监听量测中“距离”按钮的点击事件 by qhy

            //点击测面积
            //bus.$on('myMeasureArea', function () {
            document.getElementById("myMeasureArea").addEventListener("click", function(){
                    console.log("（面积）量测");
                    that.map.removeLayer(that.drawVector)
                    that.map.addLayer(that.drawVector)
                    that.map.removeInteraction(draw) //移除绘制图形
                    typeSelect = 'area'
                    addInteraction() //添加绘图进行测量
                    mapPointMove() //鼠标移动与动态帮助提示
                }.bind(this)
            ) //监听量测中“面积”按钮的点击事件 by qhy

            //点击“清除”量测结果
            //bus.$on('myClearMeasure', function () {
            document.getElementById("myClearMeasure").addEventListener("click", function(){
                    console.log("（清除）量测");
                    if (draw) {
                        draw.setActive(false) //取消激活状态，以便退出绘制
                    }
                    let ols = that.map.getOverlays()
                    ols.clear() //把所有覆盖物（测量结果）都清楚掉
                    that.map.removeLayer(that.drawVector) //把vector图层也清除掉，从而清除测量图形
                    //注：此处不能通过var定义局部变量，会导致全局vector调用局部source而报错
                    that.drawSource = null //先清空全局变量source
                    that.drawSource = new Vector() //再实例化一个矢量图层给全局变量source，从而消除上次测量残留
                    that.drawVector.setSource(that.drawSource) //更新vector的新源，避免本次量测残留图形对后续新量测的影响

                }.bind(this)
            ) //监听量测中“清除”按钮的点击事件 by qhy

            /**
             * 加载交互绘制控件函数
             */
            function addInteraction() {
                let type = typeSelect == 'area' ? 'Polygon' : 'LineString'
                draw = new Draw({
                    source: that.drawSource, //测量绘制层数据源
                    type: /** @type {ol.geom.GeometryType} */ (type), //几何图形类型
                    style: new Style({
                        //绘制几何图形的样式
                        fill: new Fill({
                            color: 'rgba(255, 255, 0, 0.2)' //浅黄色
                        }),
                        stroke: new Stroke({
                            color: 'rgba(255, 255, 0, 0.7)', //黄色
                            lineDash: [10, 10],
                            width: 2
                        }),
                        image: new Circle({
                            radius: 5,
                            stroke: new Stroke({
                                color: 'rgba(0, 0, 0, 0.7)' //黑色
                            }),
                            fill: new Fill({
                                color: 'rgba(255, 0, 255, 0.5)' //紫红色
                            })
                        })
                    })
                })
                that.map.addInteraction(draw)

                createMeasureTooltip() //创建测量工具提示框
                createHelpTooltip() //创建帮助提示框

                let listener
                //绑定交互绘制工具开始绘制的事件
                draw.on('drawstart', function (evt) {
                        // set sketch
                        sketch = evt.feature //绘制的要素

                        /** @type {ol.Coordinate|undefined} */
                        let tooltipCoord = evt.coordinate // 绘制的坐标
                        //绑定change事件，根据绘制几何类型得到测量长度值或面积值，并将其设置到测量工具提示框中显示
                        listener = sketch.getGeometry().on('change', function (evt) {
                            let geom = evt.target //绘制几何要素
                            let output
                            if (geom instanceof Polygon) {
                                output = formatArea(/** @type {ol.geom.Polygon} */(geom)) //面积值
                                tooltipCoord = geom.getInteriorPoint().getCoordinates() //坐标
                            } else if (geom instanceof LineString) {
                                output = formatLength(/** @type {ol.geom.LineString} */(geom)) //长度值
                                tooltipCoord = geom.getLastCoordinate() //坐标
                            }
                            measureTooltipElement.innerHTML = output //将测量值设置到测量工具提示框中显示
                            measureTooltip.setPosition(tooltipCoord) //设置测量工具提示框的显示位置
                        })
                    },
                    this
                )
                //绑定交互绘制工具结束绘制的事件
                draw.on('drawend', function (evt) {
                        measureTooltipElement.className = 'tooltip tooltip-static' //设置测量提示框的样式
                        measureTooltip.setOffset([0, -7])
                        // unset sketch
                        sketch = null //置空当前绘制的要素对象

                        // unset tooltip so that a new one can be created
                        measureTooltipElement = null //置空测量工具提示框对象
                        createMeasureTooltip() //重新创建一个测试工具提示框显示结果

                        helpTooltipElement.style.display = 'none'
                        unByKey(listener)
                        draw.setActive(false) //取消激活状态，以便退出绘制
                    },
                    this
                )
            }

            /**
             *创建一个新的帮助提示框（tooltip）
             */
            function createHelpTooltip() {
                if (helpTooltipElement) {
                    helpTooltipElement.parentNode.removeChild(helpTooltipElement)
                }
                helpTooltipElement = document.createElement('div')
                helpTooltipElement.className = 'tooltip hidden'
                helpTooltip = new Overlay({
                    element: helpTooltipElement,
                    offset: [15, 0],
                    positioning: 'center-left'
                })
                that.map.addOverlay(helpTooltip)
            }
            /**
             *创建一个新的测量工具提示框（tooltip）
             */
            function createMeasureTooltip() {
                if (measureTooltipElement) {
                    measureTooltipElement.parentNode.removeChild(measureTooltipElement)
                }
                measureTooltipElement = document.createElement('div')
                measureTooltipElement.className = 'tooltip tooltip-measure'
                measureTooltip = new Overlay({
                    element: measureTooltipElement,
                    offset: [0, -15],
                    positioning: 'bottom-center'
                })
                that.map.addOverlay(measureTooltip)
            }

            /**
             * 测量长度输出
             * @param {ol.geom.LineString} line
             * @return {string}
             */

            let formatLength = function (line) {
                let length = getLength(line, {
                    projection: that.myMapProjection
                })
                let output
                if (length > 100) {
                    output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km'
                } else {
                    output = Math.round(length * 100) / 100 + ' ' + 'm'
                }
                return output
            }

            /**
             * 测量面积输出
             * @param {ol.geom.Polygon} polygon
             * @return {string}
             */
            let formatArea = function (polygon) {
                //第二个formatArea函数了，这里还是用area全局变量吧
                let area = getArea(polygon, {
                    projection: that.myMapProjection
                })
                let output
                if (area > 10000) {
                    output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>'
                } else {
                    output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>'
                }
                return output
            }
            //endregion 测量功能
            //}
            //endregion

            //region气泡（信息窗口相关）
            /**
             * Elements that make up the popup.
             */
            const container = document.getElementById('popup');
            const content = document.getElementById('popup-content');
            const closer = document.getElementById('popup-closer');

            let myOverlay = null

            /**
             * Create an overlay to anchor the popup to the map.
             */
            if(myOverlay == null) {
                myOverlay = new Overlay({
                    element: container, //要转换成overlay的HTML元素
                    autoPan: {
                        animation: {
                            duration: 250,
                        },
                    },
                    //Popup放置的位置
                    positioning: 'bottom-center',
                    //是否应该停止事件传播到地图窗口
                    stopEvent: false,
                    autoPanAnimation: {
                        //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
                        duration: 250,
                    },
                });
            }

            /**
             * Add a click handler to hide the popup.
             * @return {boolean} Don't follow the href.
             */
            closer.onclick = function () {
                myOverlay.setPosition(undefined);
                closer.blur();
                return false;
            };

            map.addOverlay(myOverlay);

            /**
             * Add a click handler to the map to render the popup.
             */
            // map.on('singleclick', function (evt) {
            //   const coordinate = evt.coordinate;
            //   const hdms = toStringHDMS(toLonLat(coordinate));
            //   content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>';
            //   myOverlay.setPosition(coordinate);
            // });

            function getHtml(features) {
                //创建属性框
                let html = '';
                html += `<div class="iftp">`;
                //html += `<div class="ol-popupfeature">`;
                //html += `<i class="ol-fix"></i>`
                html += `<table>`;
                html += `<tr><th>属性名称</th><th>属性值</th></tr>`;

                let f = features.values_; //与常规的相比，Zondy返回的feature多包了一层value_【相当于value_.value_后才能拿到字段的值】，所以此处多访问一层
                //遍历各属性字段信息并放置到表格中
                for (const key in f.values_) {
                    if (f.values_.hasOwnProperty(key)
                        && key != 'geometry'
                        && key != 'SmID'
                        && key != 'SmUserID'
                        && key != 'the_geom'
                        && key != 'PopupInfo'
                        && key != 'imgSrc'
                        && key != 'UserID'  //Zondy
                        && key != 'mpLayer'
                        && key != '照片地址' //排除照片地址的干扰
                    ) {
                        const element = f.values_[key];
                        if (element) {
                            html += `<tr><td>${key}</td><td>${element}</td></tr>`;
                        }
                    }
                }
                html += `</table>`;
                html += `</div>`;
                return html;
            } //end of getHtml()



            //移除信息窗口
            function removePopup() {
                myOverlay.setPosition(undefined);
                closer.blur();
                return false;
            }

            //图层信息框内容更新
            function updateInfoView(feature) {
                //if (!feature && popup) {
                if (!feature && myOverlay) {
                    removePopup();
                    return;
                }
                if(feature){
                        //console.log(feature,11176543)
                    let html = getHtml(feature);
                        //console.log(html,76543)
                    //popup.show(feature.getGeometry().getCoordinates(), html);
                    content.innerHTML = html;
                    //myOverlay.setPosition(feature.getGeometry().getCoordinates()); //Zondy建议使用下面的方式
                    myOverlay.setPosition(getCenterPointFromExtent(feature.getGeometry().getExtent())); //Zondy建议使用这种方式

                    function getCenterPointFromExtent(extentArr){
                        let x = (extentArr[0] + extentArr[2])/2;
                        let y = (extentArr[1] + extentArr[3])/2;
                        return [x,y];
                    }
                }
            } //end of updateInfoView()

            this.updateInfoView = updateInfoView;//把该方法传递出去以便外面调用

            //endregion 信息窗口

            //region进度条
            //停止进度条
            function stopPressBar() {
                document.getElementById("preview").style.display = "none";
            }

            //开始进度条动画
            function startPressBar() {
                document.getElementById("preview").style.display = "block";
            }
            //endregion

            //region缓冲区分析（单圈+多圈）
            /*let hcqfxArr = that.MYCONFIG.bufferAnalysis[that.pn]; //有值，或undefined
            //console.log(hcqfxArr,"that.MYCONFIG.bufferAnalysis[that.pn]",32123);
            if(hcqfxArr){
                hcqfxArr.forEach(item=>{
                    bufferAnalysis(item);//目前只支持一个页面只进行一个图层的缓冲区分析
                });
            }*/

            bufferAnalysis(that.bufferAnalysisConditions);//目前只支持一个页面只进行一个图层的缓冲区分析

            function  bufferAnalysis({bufferResultBaseUrl,mIP,mPort,leftRad,rightRad,radiusStr,srcInfo,singleResultPrefix,mulResultPrefix,mExtent}){
                //var bufferResultBaseUrl = 'gdbp://MapGisLocal/OpenLayerVecterMap/sfcls/' //缓存结果图层的基地址
                //var bufferResultBaseUrl = 'gdbp://MapGisLocal/KJ_ZHONG/sfcls/' //缓存结果图层的基地址
                //var bufferResultBaseUrl = 'gdbp://MapGisLocal/TempAnalysisRusult/sfcls/' //缓存结果图层的基地址
                let bufferResultLayerArr = new Array()

                document.getElementById("bufferOneRing").addEventListener("click", function(){
                    console.log("（单圈）缓冲区分析");
                    bufferOneRing(); //调用
                });
                document.getElementById("bufferMulRings").addEventListener("click", function(){
                    console.log("（多圈）缓冲区分析");
                    bufferMulRings(); //调用
                });
                document.getElementById("cleanBuffer").addEventListener("click", function(){
                    console.log("清除缓冲区分析结果图层");
                    deleteAllbufferResultLayers(); //调用
                });

                /*let hcqArr = that.MYCONFIG.bufferAnalyst[that.pn]; //有值，或undefined
                 console.log(hcqArr,"that.MYCONFIG.bufferAnalyst[that.pn]");
                 if(hcqArr){
                 hcqArr.forEach(item=>{
                 document.getElementById("bufferAnalyst").addEventListener("click", function(){
                 console.log("（数据集）缓冲区分析");
                 bufferAnalystProcess(item); //调用
                 });

                 });
                 }*/

                //执行单圈缓冲区分析
                function bufferOneRing() {
                    //显示进度条
                    startPressBar();
                    var clsBufBySR = new Zondy.Service.ClassBufferBySingleRing({
                        //ip: 'develop.smaryun.com',
                        //port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089,
                        //ip: 'jlu3s.com',
                        ip: mIP,
                        //port: '7035', //访问IGServer的端口号，.net版为6163，Java版为8089,
                        port: mPort, //访问IGServer的端口号，.net版为6163，Java版为8089,
                        //缓冲时要素左侧缓冲半径
                        //leftRad: 10000,
                        leftRad: that.buffer_radius,
                        //缓冲时要素右侧缓冲半径
                        //rightRad: 10000,
                        rightRad: that.buffer_radius,
                        //不允许根据属性字段设置缓冲区半径
                        isByAtt: false,
                    })

                    //clsBufBySR.srcInfo = 'gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流'
                    //clsBufBySR.srcInfo = 'gdbp://MapGisLocal/KJ_ZHONG/sfcls/赣南名菜'
                    clsBufBySR.srcInfo = srcInfo


                    //var resultname = 'singleBuffAnalysisResultLayer' + getCurentTime()
                    var resultname = singleResultPrefix + getCurentTime()
                    clsBufBySR.desInfo = bufferResultBaseUrl + resultname

                    //调用基类Zondy.Service.AnalysisBase的execute方法执行类缓冲分析，AnalysisSuccess为回调函数
                    clsBufBySR.execute(AnalysisSuccess, 'post', false, 'json', () => {
                    })
                } //end of bufferOneRing()

                function bufferMulRings() {
                    //显示进度条
                    startPressBar();
                    var clsBufByMR = new Zondy.Service.ClassBufferByMultiplyRing({
                        //ip: 'develop.smaryun.com',
                        //port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089,
                        ip: mIP,
                        port: mPort, //访问IGServer的端口号，.net版为6163，Java版为8089,
                        //多圈缓冲分析各圈的缓冲半径
                        //radiusStr: '0.01,0.05,0.1', //主要针对经纬度
                        //radiusStr: '1000,5000,10000', //针对投影米坐标
                        radiusStr: that.radiusStr, //针对投影米坐标
                    })
                    //调用Zondy.Service.ClassBufferBase基类公共属性
                    //clsBufByMR.srcInfo = 'gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流'
                    //clsBufByMR.srcInfo = 'gdbp://MapGisLocal/KJ_ZHONG/sfcls/赣南名菜'
                    clsBufByMR.srcInfo = srcInfo

                    //var resultname = 'multiBuffAnalysisResultLayer' + getCurentTime()
                    var resultname = mulResultPrefix + getCurentTime()
                    clsBufByMR.desInfo = bufferResultBaseUrl + resultname
                    //调用基类Zondy.Service.AnalysisBase的execute方法执行类缓冲分析，AnalysisSuccess为回调函数
                    clsBufByMR.execute(AnalysisSuccess, 'post', false, 'json', () => {
                    })
                } //end of bufferMulRings()

                //分析成功后的回调
                function AnalysisSuccess(data) {
                    console.log(data,776)
                    //停止进度条
                    stopPressBar();
                    if (!data.results) {
                        alert('缓冲失败，请检查参数！')
                    } else {
                        if (data.results.length != 0) {
                            var resultLayerUrl = data.results[0].Value || data.results[0].value
                            //将结果图层添加到地图视图中显示
                            //var resultLayer = new Zondy.Map.GdbpLayer('MapGIS IGS BuffAnalyResultLayer', [bufferResultBaseUrl + resultLayerUrl], {
                            //var resultLayer = new Zondy.Map.GdbpLayer('MapGIS IGS BuffAnalyResultLayer', [resultLayerUrl], {
                            var resultLayer = new Zondy.Map.GdbpLayer('MapGIS IGS BuffAnalyResultLayer', [bufferResultBaseUrl + resultLayerUrl], {
                            //var resultLayer = new Zondy.Map.GdbpLayer('MapGIS IGS BuffAnalyResultLayer', ['gdbp://MapGISLocalPlus/2023开发大赛/sfcls/KJ_mul_buffer_2023-09-30-161227'], {
                                //ip: 'develop.smaryun.com',
                                //port: '6163', //访问IGServer的端口号，.net版为6163，Java版为8089,
                                ip: mIP,
                                port: mPort, //访问IGServer的端口号，.net版为6163，Java版为8089,
                                //extent:[12680206.554277513,2812952.111504088,12984878.80503216,3141822.257129459],
                                //extent:mExtent,
                                //extent:[0,0,19984878,6141822],
                                //extent:[0,0,19984878,6141822],
                                isBaseLayer: false,
                                title:"缓冲区分析结果图层",
                            });
                            map.addLayer(resultLayer)
                            bufferResultLayerArr.push(resultLayer)
                        }
                    }
                }


                function deleteAllbufferResultLayers() {
                    while (bufferResultLayerArr.length > 0) {
                        map.removeLayer(bufferResultLayerArr.pop())
                    }
                }

                function getCurentTime() {
                    var now = new Date()
                    //获取当前年份
                    var year = now.getFullYear()
                    //获取当前月份
                    var month = now.getMonth() + 1
                    //获取当前日期
                    var day = now.getDate()
                    //获取当前时刻
                    var hh = now.getHours()
                    //获取当前分钟
                    var mm = now.getMinutes()
                    //获取当前秒钟
                    var ss = now.getSeconds()
                    //将当前的日期拼串
                    var clock = year + '-'
                    if (month < 10) clock += '0'
                    clock += month + '-'
                    if (day < 10) clock += '0'
                    clock += day + '-'
                    if (hh < 10) clock += '0'
                    clock += hh
                    if (mm < 10) clock += '0'
                    clock += mm
                    if (ss < 10) clock += '0'
                    clock += ss
                    return clock
                }
            } //end of bufferAnalysis()

            //endregion

            //region热力图
            let heatLayer = null;
            //heatLayer.setRadius(parseInt(that.heatmap_radius, 10));
            //heatLayer.setBlur(parseInt(that.heatmap_blur, 10));
            var eathquake = {
                "data": [
                    {
                        "magnitude": 5.9,
                        "coordinates": [
                            [-56.072, -60.975], [165.778, -46.686], [-177.386, -29.43], [157.837, -58.312], [-178.549, -17.968],
                            [-84.121, 9.183], [120.891, 22.661], [81.307, 39.383], [-175.702, -14.621], [89.441, 2.199], [93.821, 3.269],
                            [-112.587, -28.73], [143.311, 39.665], [142.082, 41.335], [139.536, -50.352], [-175.976, -19.962],
                            [-63.555, -22.059], [106.371, -7.692], [122.248, 24.572], [119.563, 15.593], [-128.893, -55.661],
                            [-178.508, -20.872], [173.789, -19.19], [-92.294, 14.191], [178.062, -16.02], [142.913, 42.419],
                            [155.75, 49.247], [143.218, 11.838], [-109.574, 25.127], [144.006, -54.217], [139.251, 29.057],
                            [148.27, -3.109], [-172.32, -18.381], [-71.868, -33.939], [-63.571, -22.742], [145.562, -3.423],
                            [-104.495, -4.178], [-73.255, -35.783]
                        ]
                    },
                    {
                        "magnitude": 5.8,
                        "coordinates": [[121.156, 19.202], [126.829, -0.877], [-174.035, -20.536], [123.08, 9.821], [141.386, 36.214],
                            [-127.518, 43.625], [65.405, -17.839], [125.633, 10.037], [-107.644, -34.905], [-13.972, -1.261],
                            [91.748, 1.271], [89.685, 1.841], [105.457, -6.81], [121.855, -2.64], [21.475, 36.632],
                            [93.36, 2.158], [140.349, 35.596], [143.836, -54.565], [-70.562, -25.729], [-179.61, -22.13],
                            [11.086, 44.851], [133.269, -0.72], [-176.34, -20.192], [-9.663, -24.747], [151.665, 45.452],
                            [156.132, 49.354], [-178.358, -21.15], [-98.905, -36.429], [128.697, 2.645], [123.875, 6.61],
                            [157.456, -8.838], [156.048, -7.145], [171.691, -22.312], [95.832, 22.72], [-150.76, 61.237],
                            [59.571, 33.506], [-178.186, -15.307]
                        ]
                    },
                ]
            };
            let attrStr = "magnitude";
            //console.log(eathquake,112)
            //console.log(eathquake.data[0].magnitude,1121)

            document.getElementById("heatMapAnalyst").addEventListener("click", function() {
                console.log("开始热力图分析");
                if(heatLayer) map.removeLayer(heatLayer);
                heatLayer = createHeatmapLayer(eathquake.data,parseInt(that.heatmap_blur, 10),parseInt(that.heatmap_radius, 10));
                map.addLayer(heatLayer);
            });

            document.getElementById("heatMapClear").addEventListener("click", function() {
                console.log("清除热力图");
                if(heatLayer) map.removeLayer(heatLayer);
            });

            function createHeatmapLayer (data, blur, radius){
                let source = new Vector({wrapX:false})
                let features = []
                for (let i in data) {
                    //var att = parseFloat(data[i].magnitude) ;
                    var att = parseFloat(data[i][attrStr]) ;
                        console.log(att,257)
                    for(let j in data[i].coordinates)
                    {
                        let newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
                        features.push(newFeature)
                    }
                }
                source.addFeatures(features)
                //创建热力图层
                let HeatmapLayer = new lHeatMap({
                    title:"生成的热力图",
                    source,
                    blur,
                    radius,
                    weight:'weight'  //默认热力图层权值字段（0-1）
                });
                return HeatmapLayer
            }

            function createFeature (coordinates,att) {
                let tFeature =new Feature({
                    //geometry: new ol.geom["Point"](coordinates)
                    geometry: new Point(coordinates)
                });
                tFeature.set('weight', att - 5);
                return tFeature;
            }
            //endregion

            //region聚类图
            var clusterLayer  = null;
            var ia = null;
            var eathquake2 = {
                "data": [
                    {
                        "magnitude": 5.9,
                        "coordinates": [
                            [-56.072, -60.975], [165.778, -46.686], [-177.386, -29.43], [157.837, -58.312], [-178.549, -17.968],
                            [-84.121, 9.183], [120.891, 22.661], [81.307, 39.383], [-175.702, -14.621], [89.441, 2.199], [93.821, 3.269],
                            [-112.587, -28.73], [143.311, 39.665], [142.082, 41.335], [139.536, -50.352], [-175.976, -19.962],
                            [-63.555, -22.059], [106.371, -7.692], [122.248, 24.572], [119.563, 15.593], [-128.893, -55.661],
                            [-178.508, -20.872], [173.789, -19.19], [-92.294, 14.191], [178.062, -16.02], [142.913, 42.419],
                            [155.75, 49.247], [143.218, 11.838], [-109.574, 25.127], [144.006, -54.217], [139.251, 29.057],
                            [148.27, -3.109], [-172.32, -18.381], [-71.868, -33.939], [-63.571, -22.742], [145.562, -3.423],
                            [-104.495, -4.178], [-73.255, -35.783]
                        ]
                    },
                    {
                        "magnitude": 5.8,
                        "coordinates": [[121.156, 19.202], [126.829, -0.877], [-174.035, -20.536], [123.08, 9.821], [141.386, 36.214],
                            [-127.518, 43.625], [65.405, -17.839], [125.633, 10.037], [-107.644, -34.905], [-13.972, -1.261],
                            [91.748, 1.271], [89.685, 1.841], [105.457, -6.81], [121.855, -2.64], [21.475, 36.632],
                            [93.36, 2.158], [140.349, 35.596], [143.836, -54.565], [-70.562, -25.729], [-179.61, -22.13],
                            [11.086, 44.851], [133.269, -0.72], [-176.34, -20.192], [-9.663, -24.747], [151.665, 45.452],
                            [156.132, 49.354], [-178.358, -21.15], [-98.905, -36.429], [128.697, 2.645], [123.875, 6.61],
                            [157.456, -8.838], [156.048, -7.145], [171.691, -22.312], [95.832, 22.72], [-150.76, 61.237],
                            [59.571, 33.506], [-178.186, -15.307]
                        ]
                    },
                ]
            };
            let attrStr2 = "magnitude";

            document.getElementById("clusterLayerShow").addEventListener("click", function() {
                console.log("显示聚类图");
                if(clusterLayer) map.removeLayer(clusterLayer);
                clusterLayer  = createClusterLayer(eathquake2.data);
                map.addLayer(clusterLayer);

                ia =new Select({
                    condition: function(evt) {
                        return evt.type == 'singleclick' || evt.type == 'pointermove';
                    },
                    style: selectStyleFunction,
                    layers:[clusterLayer],
                    wrapX:false
                });
                map.addInteraction(ia);
            });

            document.getElementById("myClearClusterLayer").addEventListener("click", function() {
                console.log("关闭聚类图");
                if(clusterLayer) map.removeLayer(clusterLayer);
                if(ia) map.removeInteraction(ia);
            });


            function createClusterLayer (data){
                var vectorSource = new Vector({wrapX:false})
                var features = []
                for (var i in data) {
                    //var att = parseFloat(data[i].magnitude) ;
                    var att = parseFloat(data[i][attrStr2]) ;
                    for(var j in data[i].coordinates)
                    {
                        var newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
                        features.push(newFeature)
                    }

                }
                vectorSource.addFeatures(features)
                var clusterLayer = new lVector({
                    title:"聚类图图层",
                    source:new Cluster({
                        distance:40,   //最近的聚合图元距离(单位:像素)
                        source:vectorSource,
                        wrapX:false
                    }),
                    style:styleFunction
                });
                return clusterLayer
            }

            function createFeature (coordinates,att) {
                var tFeature =new Feature({
                    //geometry: new ol.geom["Point"](coordinates)
                    geometry: new Point(coordinates)
                });
                tFeature.set('weight', att);
                return tFeature;
            }
            var maxFeatureCount = 0;
            function getMaxFeatureCount()
            {
                var features = clusterLayer.getSource().getFeatures();
                var feature, radius;
                for (var i = features.length - 1; i >= 0; --i) {
                    feature = features[i];
                    var originalFeatures = feature.get('features');
                    maxFeatureCount = Math.max(maxFeatureCount, originalFeatures.length);
                }
            }
            function styleFunction(feature, resolution) {
                var style;
                var size = feature.get('features').length;
                getMaxFeatureCount();
                if (size > 1) {
                    style = new Style({
                        image: new Circle({
                            radius: 10+(size/maxFeatureCount)*10,
                            fill: new Fill({
                                color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
                            })
                        }),
                        text: new Text({
                            text: size.toString(),
                            fill: new Fill({
                                color: '#fff'
                            }),
                            stroke: new Stroke({
                                color: 'rgba(0, 0, 0, 0.6)',
                                width: 3
                            })
                        })
                    });
                } else {
                    var originalFeature = feature.get('features')[0];
                    style = new Style({
                        geometry: originalFeature.getGeometry(),
                        image: new RegularShape({
                            radius1: 8+(parseFloat(originalFeature.get('weight'))-5)*10,
                            radius2: 6,
                            points: 5,
                            angle: 0,
                            fill: new Fill({
                                color: 'rgba(0, 250, 0, 0.8)'
                            }),
                            stroke: new Stroke({
                                color: 'rgba(255, 204, 0, 0.2)',
                                width: 1
                            })
                        })
                    });
                }
                return style;
            }

            function selectStyleFunction(feature) {
                var size = feature.get('features').length;
                getMaxFeatureCount();
                var styles = [new Style({
                    image: new Circle({
                        radius: 10+(size/maxFeatureCount)*10,
                        fill: new Fill({
                            color: 'rgba(255, 255, 255, 0.01)'
                        })
                    })
                })
                ];
                var originalFeatures = feature.get('features');
                for (var i = originalFeatures.length - 1; i >= 0; --i) {
                    let originalFeature = originalFeatures[i];
                    styles.push(
                        new Style({
                            geometry: originalFeature.getGeometry(),
                            image: new RegularShape({
                                radius1: 8+(parseFloat(originalFeature.get('weight'))-5)*10,
                                radius2: 6,
                                points: 5,
                                angle: 0,
                                fill: new Fill({
                                    //color: 'rgba(0, 0, 205, 0.8)'
                                    color: 'rgba(255, 0, 205, 0.8)' //紫红色
                                }),
                                stroke: new Stroke({
                                    color: 'rgba(255, 204, 0, 0.2)',
                                    width: 1
                                })
                            })
                        })
                    );
                }
                return styles;
            }

            //endregion
        },

        //地图属性查询
        //基于Zondy等地图属性查询
        AttQuery(){
            let that = this;

            /////let sxcxArr = that.MYCONFIG.attrQuery[that.pn]; //有值，或undefined
            /////console.log(sxcxArr,"that.MYCONFIG.attrQuery[that.pn]",86543);

            let sxcxArr = that.sxcxArr;

            clearA();
            //显示进度条
            startPressBar();

            //初始化查询结构对象，设置查询结构包含几何信息
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                resultFormat: "json",
                struct: queryStruct
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber =20;
            //设置属性条件
            //queryParam.where = document.getElementById("Conditions").value;
            //queryParam.where = "类型='土特产'";
            //queryParam.where = that.attQueryConditions;
            queryParam.where = "地点 like '" +that.attQueryConditions+ "'"  ;
            //console.log(queryParam,14)
            //实例化地图文档查询服务对象
            //var queryService = new Zondy.Service.QueryDocFeature(queryParam, "gn_dish", 1, { //①查询参数信息,②地图文档名称,③图层索引号,④{属性键值对}
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, sxcxArr.layerName, sxcxArr.lyrIndex, { //①查询参数信息,②地图文档名称,③图层索引号,④{属性键值对}
                //ip: "develop.smaryun.com",
                //port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089
                //ip: "jlu3s.com",
                //port: "7035"    //访问IGServer的端口号，.net版为6163，Java版为8089
                ip: sxcxArr.mIP,
                port: sxcxArr.mPort    //访问IGServer的端口号，.net版为6163，Java版为8089
            });
            //执行查询操作，querySuccess为查询回调函数
            queryService.query(querySuccess, queryError);

            //查询失败回调
            function queryError(e) {
                //停止进度条
                stopPressBar();
            }

            //查询成功回调
            var drawLayer = null;
            function querySuccess(result) {
                //停止进度条
                stopPressBar();
                //初始化Zondy.Format.PolygonJSON类
                var format = new Zondy.Format.PolygonJSON();
                //将MapGIS要素JSON反序列化为ol.Feature类型数组
                var features = format.read(result);
                //var features = (new GeoJSON()).readFeatures(result.result.recordsets[0].features)
                console.log(features,16)

                //实例化一个矢量图层drawLayerr用于高亮显示结果
                var drawSource = new Vector({
                    wrapX: false
                });
                drawSource.addFeatures(features);
                drawLayer = new lVector({
                    title:"地图属性查询结果图层",
                    source: drawSource,
                    style: new Style({
                        //填充色
                        fill: new Fill({
                            color: 'rgba(255, 0, 0, 0.5)'
                        }),
                        //边线样式
                        stroke: new Stroke({
                            color: 'rgba(255,204, 51, 1)',
                            width: 1
                        }),
                        image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                            //anchor: [0.5, 0.9],
                            //anchor: [0.8, 0.5], //勉强可行
                            //anchor: [0, 0.5], //基本可行
                            //anchor: [0, 0], //一个准，一个偏移
                            anchor: [1.55, 1.95], //基本准了
                            src: that.location_green  //此处得用base64格式的图片源才能显示出来
                            //src: sxcxArr.resultIcon  //此处得用base64格式的图片源才能显示出来 注意：这种方式会显示出错
                        })
                    })
                });

                that.map.addLayer(drawLayer);
                that.sxcxResultLayer = drawLayer;
                /*map.setView(new ol.View({
                 center: [110, 30],
                 zoom: 4,
                 projection: 'EPSG:4326'
                 }));*/

                //（监听）地图单击、双击、悬浮等的全局事件
                that.map.on('click', mouseEventLinstener); //map.on('pointermove', pointermoveLinstener);
                function mouseEventLinstener(e) {
                        //console.log(e,876)
                    that.map.forEachFeatureAtPixel(e.pixel, function (feature,layer) {
                            //console.log(feature,layer,23456)
                        that.updateInfoView(feature);//调用信息窗口（气泡）信息更新函数以显示相应要素的属性内容
                    });
                }

            }
            //清除客户端查询结果信息
            function clearA() {
                //停止进度条
                stopPressBar();
                if (drawLayer) {
                    //移除高亮显示结果图层drawLayerr
                    map.removeLayer(drawLayer);
                }
                else
                    return;
            }
            /*======进度条======*/
            //停止进度条
            function stopPressBar() {
                document.getElementById("preview").style.display = "none";
            }
            //开始进度条动画
            function startPressBar() {
                document.getElementById("preview").style.display = "block";
            }
        },
        //清除[属性查询]的图层
        removeSXCXResultLayer(){
            let that = this;
            if (that.sxcxResultLayer) {
                //移除高亮显示结果图层drawLayerr
                that.map.removeLayer(that.sxcxResultLayer);
            }
        },

        //region地图几何空间查询
        geometryQuery(){
            let that=this;

            //let queryUrl,layerName,attributeFilter;
            let mIP,mPort,layerName,lyrIndex,resultIcon,layerTitle;
            mIP = this.geometryQueryConditions.mIP;
            mPort = this.geometryQueryConditions.mPort;
            layerName = this.geometryQueryConditions.layerName;
            lyrIndex = this.geometryQueryConditions.lyrIndex;
            //resultIcon = this.geometryQueryConditions.resultIcon;
            resultIcon = this.location_blue;
            layerTitle = this.geometryQueryConditions.layerTitle;


            this.myClearGeometryQuery();//先清除先前的图形以避免干扰

            let vectorLayer, interaction, source,feature;
            source = new Vector({wrapX: false});
            vectorLayer = new lVector({
                title:"几何查询的overlay图层",
                source: source,
                style: new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 3
                    }),
                })
            });
            this.map.addLayer(vectorLayer);
            this.geometryQueryVectorLayer=vectorLayer;

            interaction = new Draw({
                source: source,
                type: "Polygon",
            });

            this.geometryQueryInteraction = interaction;//传出去以便后续集中清理掉
            this.map.addInteraction(interaction);

            interaction.on('drawstart', function (evt) {
                feature = evt.feature;
            });
            interaction.on('drawend', function () {

                that.map.removeInteraction(interaction) //移除绘制图形的交互动作

                //基于Zondy的方式，要对feature做一下特别从处理才行
                drawToolCallback_Polygon(feature);

                function drawToolCallback_Polygon(feature)
                {
                    //显示进度条
                    startPressBar();

                    //创建一个用于查询的区
                    var geomObj = new Zondy.Object.Polygon();
                    //console.log(feature,23)
                    //console.log(feature.getGeometry(),231) //方式一能获取几何图形
                    //console.log(feature.values_.geometry,232) //方式二也能获取几何图形
                    //geomObj.setByOL(feature.feature.values_.geometry);//案例中的写法在这里不生效
                    geomObj.setByOL(feature.getGeometry())
                    GeomQuery(geomObj); //执行Zondy几何空间查询
                }

            });

            function GeomQuery(geomZD)
            {
                //初始化查询结构对象，设置查询结构包含几何信息
                var queryStruct = new Zondy.Service.QueryFeatureStruct();
                //是否包含几何图形信息
                queryStruct.IncludeGeometry = true;
                //是否包含属性信息
                queryStruct.IncludeAttribute = true;
                //是否包含图形显示参数
                queryStruct.IncludeWebGraphic = false;
                //指定查询规则
                var rule = new Zondy.Service.QueryFeatureRule({
                    //是否将要素的可见性计算在内
                    EnableDisplayCondition: false,
                    //是否完全包含
                    MustInside: false,
                    //是否仅比较要素的外包矩形
                    CompareRectOnly: false,
                    //是否相交
                    Intersect: true
                });
                //实例化查询参数对象
                var queryParam = new Zondy.Service.QueryParameter({
                    r: Math.random(),
                    geometry: geomZD,
                    resultFormat: "json",
                    struct: queryStruct,
                    rule: rule
                });
                //设置查询分页号
                queryParam.pageIndex = 0;
                //设置查询要素数目
                queryParam.recordNumber = 20;
                //实例化地图文档查询服务对象
                //var queryService = new Zondy.Service.QueryDocFeature(queryParam, "gn_snack", "1", {
                var queryService = new Zondy.Service.QueryDocFeature(queryParam, layerName, lyrIndex, {
                    //ip: "develop.smaryun.com",
                    //port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089
                    ip: mIP,
                    port: mPort    //访问IGServer的端口号，.net版为6163，Java版为8089
                });
                //执行查询操作，querySuccess为查询回调函数
                queryService.query(querySuccess, queryError);
            }

            //查询失败回调
            function queryError(e) {
                //停止进度条
                stopPressBar();
            }

            //查询成功回调
            function querySuccess(result) {
                //停止进度条
                stopPressBar();
                //初始化Zondy.Format.PolygonJSON类
                var format = new Zondy.Format.PolygonJSON();
                //将MapGIS要素JSON反序列化为ol.Feature类型数组
                var features = format.read(result);

                let vectorSource = new Vector({
                    //features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
                    features: features, //或后续通过vectorSource.addFeatures(features)来添加
                    wrapX: false
                });
                let resultLayer = new lVector({
                    title:"几何空间查询结果图层",
                    source: vectorSource,
                    style: new Style({
                        //填充色
                        fill: new Fill({
                            color: 'rgba(255, 0, 0, 0.5)'
                        }),
                        //边线样式
                        stroke: new Stroke({
                            color: 'rgba(255,204, 51, 1)',
                            width: 1
                        }),
                        image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                            //anchor: [0.5, 0.9],
                            //anchor: [0.8, 0.5], //勉强可行
                            //anchor: [0, 0.5], //基本可行
                            //anchor: [0, 0], //一个准，一个偏移
                            anchor: [0.55, 0.95], //基本准了
                            src: that.location_blue  //此处得用base64格式的图片源才能显示出来
                            //src: resultIcon  //此处得用base64格式的图片源才能显示出来 //注意：用这种方式暂时不能显示出来
                        })
                    })
                });
                that.map.addLayer(resultLayer);
                that.jhcxResultLayer = resultLayer;

                /*后续也可以通过这种方式来指定样式*/
                /*let myStyle = new Style({
                 image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                 anchor: [0.5, 0.9],
                 src: that.location_blue  //此处得用base64格式的图片源才能显示出来
                 })
                 });
                 resultLayer.setStyle(myStyle)*/

                //（监听）地图单击、双击、悬浮等的全局事件
                that.map.on('pointermove', mouseEventLinstener); //map.on('click', pointermoveLinstener);
                function mouseEventLinstener(e) {
                    //console.log(e,876)
                    that.map.forEachFeatureAtPixel(e.pixel, function (feature,layer) {
                        //console.log(feature,layer,23456)
                        that.updateInfoView(feature);//调用信息窗口（气泡）信息更新函数以显示相应要素的属性内容
                    });
                }

            } //end of querySuccess(result)

            /*======进度条======*/
            //停止进度条
            function stopPressBar() {
                document.getElementById("preview").style.display = "none";
            }
            //开始进度条动画
            function startPressBar() {
                document.getElementById("preview").style.display = "block";
            }

        },
        //endregion

        //region（清除/取消）几何查询的图形
        myClearGeometryQuery(){
            let that = this;
            that.map.removeLayer(that.geometryQueryVectorLayer);//清除图形
            that.map.removeInteraction(that.geometryQueryInteraction) //移除绘制图形的交互动作
            //let ols = that.map.getOverlays();
            that.map.removeLayer(that.jhcxResultLayer);//清除几何查询的结果图层
        },
        //endregion

        F2(){

        },
        F3(){

        },
        F4(){

        },
        F5(){

        },

    },
    created() {

    },
    mounted() {
        // 页面各元素挂载就绪后执行
        this.InitMap();
    },
    watch:{

    },
    computed:{

    }
}
</script>

<style scoped>

@import '../assets/css/zdmap.css';

/* 地图容器基本样式 */
.map-display {
    position: absolute;
    width: 100%;
    height:100%;
    background-color: darkgray;
  }

/*地图工具栏相关样式  */
.mytool-btns{
    position: relative;
    /*left: 10px;*/
    margin-left:2.5em;
    top: 10px;
    height: 60px;
    /*width:320px;*/ /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
    width:450px; /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
  }

  .navbtn-items{
    float: left;
    margin: 0 5px;
    /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
  }

  .navBtnDiv{
    /*width: auto;*/
    /*background-color:rgba(0,0,0,0);*/
    margin-left: 55px;
    /*margin-top: 5px;*/
  }
  .navbtn-btn{
    margin-right: 10px;
  }

  .navbtn-items:hover{
    cursor: pointer;
  }

  .navbtn-items>img{
    width:36px;
    height:36px;
    padding:5px;
  }
  .item-selected {
    position: absolute;
    width: 25px !important;
    height: 25px !important;
    left: 15px !important;
    bottom: 0;
  }

  .layer-hide {
    display:none;
  }

/*工具栏-（量测-整饰-控制-查询等）下拉框*/
/*工具栏-（量测-整饰-控制-查询）下拉框-子项*/
.map-tool-item{
    width: 85px;
    height: 29px;
    border-bottom: 1px solid #b4b4b4;
    cursor: pointer;
}

.map-tool-item>img{
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    margin-left: 5px;
}

.map-tool-item>span{
    display: block;
    float: left;
    width: 50px;
    height: 20px;
    margin-top: 4px;
    margin-left: 2px;
    line-height: 19px;
    text-align: center;
    font-size:12px;
    font-family:微软雅黑;
}

/*工具项：整饰-->>对应下拉面板*/
.mapDecorateTools{
    position:relative;
    width: 85px;
    left: 10em;
    background-color: #ffffff;
    box-shadow: 4px 4px 10px #888888;
    z-index: 4; /*高于lyrBox的3*/
}
/*地图整饰（坐标、比例尺、图例均通用）*/
.map-decorate {
    position: absolute;
    z-index: 2;
}
/*比例尺位置*/
/*用于覆盖原生比例尺的样式*/
.ol-scale-line {
    background: #f39c12;
    border-radius: 4px;
    bottom: 8px;
    left: -20em; /*约等于16px*20=320px*/
    padding: 2px;
    position: absolute;
    height: 26px;
}
.map-scalebar{
    position:absolute;
    bottom:6px;
    left:10em;
}
/*坐标位置*/
.map-coordinate{
    left:315px;
    /*right:105px;*/
    bottom:15px;
    /*top:10px;*/
    margin:2px 6px;
    padding: 2px 4px;
    font-family:Arial;
    color:#ffffff;
    background-color: #f39c12;
    /*min-width: 150px;*/
    border-radius: 4px;
    height: 20px;
}

/*工具项：量测-->>对应下拉面板*/
.mapMeasurementTools{
    position:relative;

    width: 85px;
    left: 6em;

    background-color: #ffffff;
    box-shadow: 4px 4px 10px #888888;
    z-index: 5; /*高于lyrBox的3*/
}


</style>